<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <base th:href="${#request.getContextPath() + '/system/'}"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <!-- Invalid Stylesheet. This makes stuff look pretty. Remove it if you want the CSS completely valid -->
    <!-- Reset Stylesheet -->
    <link rel="stylesheet" href="resources/css/reset.css" type="text/css"
          media="screen"/>
    <!-- Main Stylesheet -->
    <link rel="stylesheet" href="resources/css/style.css" type="text/css"
          media="screen"/>
    <link rel="stylesheet" href="resources/css/invalid.css" type="text/css"
          media="screen"/>

    <!--                       Javascripts                       -->
    <!-- jQuery -->
    <script type="text/javascript"
            src="resources/scripts/jquery-2.1.0.min.js"></script>
    <!-- jQuery Configuration -->
    <script type="text/javascript"
            src="resources/scripts/simpla.jquery.configuration.js"></script>

    <!-- dialog弹出框的导入-->
    <link rel="stylesheet" href="resources/widget/dialog/jquery-ui.min.css"/>
    <script type="text/javascript" src="resources/widget/dialog/jquery-ui-1.9.2.custom.min.js"></script>

    <!-- ztree树形结构 -->
    <link rel="stylesheet" href="resources/widget/zTree/zTreeStyle/zTreeStyle.css"/>
    <script type="text/javascript" src="resources/widget/zTree/jquery.ztree.all.min.js"></script>

    <script type="text/javascript" th:src="${#request.getContextPath() + '/commons/js/myajax.js'}"></script>
    <script type="text/javascript" th:src="${#request.getContextPath() + '/commons/js/myztree.js'}"></script>
    <script type="text/javascript" th:src="${#request.getContextPath() + '/commons/js/mydialog.js'}"></script>


    <script th:inline="javascript">

        $(function(){
            //初始化树形结构
            initClients();
        });

        /**
         * 初始化终端树形结构
         */
        function initClients(){
            //获得当前主机
            myajax({
                url:[[${#request.getContextPath()}]] + "/client/getHost",
                success:function(data){
                    if(data != null){
                        $("#updateBtn").html("一键对讲主机为：" + data.userid);
                    }
                }
            });

            //获得终端结构树
            getClientZtree("ztree_div", {
                check: true,
                chkStyle: "radio",
                radioType: "all",
                showIcon: true,
                init: function(ztreeObj){
                    //取消所有勾选
                    ztreeObj.checkAllNodes(false);
                }
            });

            //获得第二颗终端树
            getClientZtree("ztree_div2", {
                check: true,
                showIcon: true
            });
        }

        /**
         * 选择对讲主机
         */
        function select_host(){
            //弹出dialog
            openDialog("dialog_div", "选择对讲主机");
        }

        /**
         * 修改对讲主机
         */
        function updateHost(){
            var treeObj = getZtree("ztree_div");
            //获得所有被选择的节点
            var checkedNodes = treeObj.getCheckedNodes(true);

            if(checkedNodes.length == 1){

                var node = checkedNodes[0];
                if(node.isOnLine == 1){

                    $("#updateBtn").html("一键对讲主机为：" + node.userid);
                    closeDialog("dialog_div");
                } else {
                    alert("必须选择一个上线的终端作为对讲主机！");
                    return;
                }

            } else {
                alert("请选择一个终端作为对讲主机！");
                return;
            }
        }

        /**
         * 选择对讲终端
         */
        function select_host2(){
            //弹出dialog
            openDialog("dialog_div2", "选择对讲终端");
        }

        /**
         * 修改对讲终端
         */
        function updateHost2(){
            var treeObj = getZtree("ztree_div2");
            //获得所有被选择的节点
            var checkedNodes = treeObj.getCheckedNodes(true);

            if(checkedNodes.length > 0){

                var html = "[";
                for(var i = 0; i < checkedNodes.length; i++){

                    if(checkedNodes[i].userid == null){
                        continue;
                    }

                    if(html != "["){
                        html += ",";
                    }
                    html += checkedNodes[i].userid;
                }
                html += "]";

                $("#updateBtn2").html("一键对讲终端为：" + html);
                closeDialog("dialog_div2");

            } else {
                alert("请至少选择一个终端作为对讲终端！");
                return;
            }
        }

        /**
         * 提交一键对讲终端
         */
        function submit_host(){
            var treeObj = getZtree("ztree_div");
            //获得所有被选择的节点
            var checkedNodes = treeObj.getCheckedNodes(true);

            if(checkedNodes.length != 1){
                alert("请选择一个对讲主机");
                return;
            }


            var treeObj2 = getZtree("ztree_div2");
            //获得所有被选择的节点
            var checkedNodes2 = treeObj2.getCheckedNodes(true);

            if(checkedNodes2.length < 1){
                alert("请至少选择一个对讲终端");
                return;
            }

            var uids = [];
            for(var i = 0; i < checkedNodes2.length; i++){
                if(checkedNodes2[i].userid != null){
                    uids.push(checkedNodes2[i].userid);
                }
            }

            myajax({
                type: "POST",
                url: "/client/sethost",
                data: {"cid": checkedNodes[0].userid, "uids": uids},
                success: function(data){
                    alert("设置成功！");
                }
            });
        }
    </script>

</head>
<body>
<div id="main-content">
    <div class="content-box">
        <!-- End .content-box-header -->
        <div class="content-box-content">
            <h2>设置一键对讲主机</h2>

            <form>
                <p>
                    选择终端：
                </p>
                <p>
                    <button id="updateBtn" type="button" class="mybutton" onclick="select_host();">当前没有设置对讲主机</button>
                </p>
                <p>
                    <button id="updateBtn2" type="button" class="mybutton" onclick="select_host2();">一键对讲终端</button>
                </p>

                <p>
                    <button type="button" class="mybutton" onclick="submit_host();">确认提交</button>
                </p>
            </form>

            <br/>
            <hr/>
            <br/>
        </div>
        <!-- End .content-box-content -->
    </div>
</div>
<!-- End #main-content -->

<!-- 弹出终端选择框 -->
<div id="dialog_div" style="display: none;">
    <!-- 树形结构 -->
    <div id="ztree_div" class="ztree"></div>
    <button id="btnid" class="mybutton" type="button" onclick="updateHost();">修改</button>
</div>

<div id="dialog_div2" style="display: none;">
    <!-- 树形结构 -->
    <div id="ztree_div2" class="ztree"></div>
    <button id="btnid2" class="mybutton" type="button" onclick="updateHost2();">修改</button>
</div>


</body>
</html>